<template>
    <div class="region">
        <el-input
            class="region_input"
            placeholder="输入地区进行搜索"
            v-model="filterText">
        </el-input>
        <el-tree
        class="filter-tree"
        :data="regiondata"
        :props="defaultProps"
        :filter-node-method="filterRegionNode"
        ref="refionTree"
        :render-content="renderContent">
        </el-tree>
    </div>

</template>

<script>
import { getRegionList } from "@/api/permission";
export default {
  data() {
    return {
      filterText: "",
      regiondata: [], //地区列表数据
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    renderContent(h, { node, data, store }) {
      let _showworld = data.id  != 'xxxxxx' ? "国内" : "地区属性"
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button size="mini" type="text">
              {_showworld}
            </el-button>
          </span>
        </span>
      );
    },
    getRegionData() {
      let that = this;
      getRegionList().then(res => {
        let _data = [];
        if (res.code === 0) {
          res.data.map((item, index) => {
            let _uldata = {
              id: item.id,
              label: item.value,
              children: []
            };
            if (item.children) {
              let _lidatalist = [];
              item.children.map((items, indexs) => {
                let _lidata = {
                  id: items.id,
                  label: items.value,
                  children: []
                };
                if (items.children) {
                  let _childlist = [];
                  items.children.map((childitem, childindex) => {
                    let _childdata = {
                      id: childitem.id,
                      label: childitem.value
                    };
                    _childlist.push(_childdata);
                  });
                  _lidata.children = _childlist;
                }
                _lidatalist.push(_lidata);
              });
              _uldata.children = _lidatalist;
            }

            _data.push(_uldata);
          });
        }
        let _addtitle = {
          id: "xxxxxx",
          label: "地区名称"
        }
        _data.unshift(_addtitle)
        that.regiondata = _data;
      });
    },
    filterRegionNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  watch: {
    filterText(val) {
      this.$refs.refionTree.filter(val);
    }
  },
  mounted() {
    this.getRegionData();
  }
};
</script>

<style lang="scss">
.region {
  width: 500px;
  margin: 50px auto;
  padding: 5px;
  -moz-box-shadow: 2px 2px 5px #333333;
  -webkit-box-shadow: 2px 2px 5px #333333;
  box-shadow: 2px 2px 5px #333333;
  .el-input {
    margin: 20px 10%;
    width: 80%;
  }
  .el-tree-node:nth-child(2n) {
    background-color: #fdffff;
  }
  .el-tree-node:nth-child(2n + 1) {
    background-color: #f2f2f2;
  }
  .el-tree-node__children {
    .el-tree-node:nth-child(2n) {
      background-color: #f2f2f2;
    }
    .el-tree-node:nth-child(2n + 1) {
      background-color: #fdffff;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-pageSize: 14px;
    padding-right: 8px;
  }
}
</style>


